<template>
  <div id="register" class="register">
    <img class="bgbox" id="bgbox" alt="" src="~@/assets/background_clear.png" />
    <div class="reg_box">
      <h1>注 册</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="ruleForm.realname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <!-- <el-input v-model="ruleForm.email"></el-input> -->
          <el-input placeholder="请输入内容" v-model="ruleForm.email" class="input-with-select">
            <el-button slot="append" type="info" plain icon="el-icon-message" @click="sendCode">发送验证码</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="ruleForm.code"></el-input>
        </el-form-item>
        
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >注册</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="info" plain @click="backlogin()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "Register",
  data() {
    return {
      ruleForm: {
        username: "",
        realname: "",
        password: "",
        email: "",
        code: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        realname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],

      },
    };
  },
  methods: {
    //点击按钮，发送验证码到邮箱
    sendCode(){
      this.$axios({
            method: "post" /* 指明请求方式，可以是 get 或 post */,
            url: "/users/code" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
            data: qs.stringify({
              /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
              email: this.ruleForm.email,
              islogin: 'false',
            }),
          })
            .then((res) => {
              /* res 是 response 的缩写 */
              //console.log(res.data);
              if (res.data.success) {
                this.$message.success(res.data.message + "请前往邮箱查看");
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              console.log(err); /* 若出现异常则在终端输出相关信息 */
            });
    },

    //点击注册，提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //alert("submit!");
          this.$axios({
            method: "post" /* 指明请求方式，可以是 get 或 post */,
            url: "/users/register" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
            data: qs.stringify(
              /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
              this.ruleForm
              ),
          })
            .then((res) => {
              /* res 是 response 的缩写 */
              //console.log(res.data);
              if (res.data.success) {
                this.$message.success("注册成功！");
                setTimeout(() => {this.$router.push("/login")}, 1000);
              } else {
                this.$message.error("注册失败！");
              }
            })
            .catch((err) => {
              console.log(err); /* 若出现异常则在终端输出相关信息 */
            });


        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      //console.log(this);
      if (this.$refs[formName] !== undefined) {
        //console.log("点击重置了！")
        this.$refs[formName].resetFields();
      }
    },
    //返回登录页面
    backlogin(){
      this.$router.push('/login');
    },
  },
};
</script>

<style scoped>
#register {
  font-family: "Noto Serif SC", serif;
  margin-top: 60px;
}
#register >>> .el-input__inner {
  font-family: "Noto Serif SC", serif;
}
.bgbox {
  display: block;
  opacity: 1;
  z-index: -3;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1s, transform 0.25s, filter 0.25s;
  backface-visibility: hidden;
}
/* .register {
  background-color: #2b4b6b;
  height: 100%;
} */
.reg_box {
  width: 400px;
  height: 460px;
  padding: 0 25px 0 25px;
  line-height: 40px;
  position: relative;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 20px;
}
.demo-ruleForm {
  position: absolute;
  left: 0%;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns {
  /* display: flex; */
  position: absolute;
  left: 8%;
}
</style>
